let $image = $(".container img");

// 1.2 配置选项
let options = {
    // 纵横比
    aspectRatio: 1,
    preview: ".preview",
};

// 1.3 创建裁剪区域
$image.cropper(options);
// todo ======================点击按钮 模拟点击了文件域================
$('#btnChooseImage').click(function () {
    // 模拟点击文件选择框
    $('#file').click()
})

// todo ======================更换裁剪图片====================
$('#file').on('change', function () {
    // 用户选择的图片
    const file = this.files[0]
    console.log(file);
    if (!file) {
        return
    }
    // 将选择的图片转换为 url地址
    const imgSrc = URL.createObjectURL(file)
    // console.log(imgSrc);

    //     更换剪裁区的图片

    // - 先销毁原来的剪裁区
    // - 更改图片的src属性`重新设置图片路径`
    // - 重新生成剪裁区`创建新的裁剪区域`
    $image
        .cropper('destroy') // 销毁旧的裁剪区域
        .attr('src', imgSrc) // 重新设置图片路径
        .cropper(options)
})

// todo=========================点击确认的时候 裁剪图片 转成base64格式 提交字符串到接口
$('#btnCreateAvatar').click(function () {
    // 剪裁得到一张图片（canvas图片）
    let base64Str = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 100,
        height: 100
    });

    // 把图片转成base64格式
    let dataURL = base64Str.toDataURL('image/png'); // 把canvas图片转成base64格式的字符串
    // console.log(dataURL);
    axios
        .post("/my/update/avatar", `avatar=${encodeURIComponent(dataURL)}`)
        .then((res) => {
            // 提示
            if (res.data.status !== 0) {
                // 失败
                return layer.msg("更新头像失败")
            }

            layer.msg("更新头像成功")
            // 页面中的头像发生变化（更新）
            window.parent.getUserInfo()
        });


})